<template>
      <el-form :model="elePayDetForm" ref="elePayDetForm" :inline="true" label-width="72px" :label-position="'left'">
        <el-row class="search-title">条件搜索</el-row>
        <el-form-item prop="account_carno">
          <el-input prefix-icon="el-icon-search" v-model="elePayDetForm.account_carno" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item> <el-button class="btn-search" type="primary"  @click="submitForm(elePayDetForm,1)">搜索
        </el-button></el-form-item>
        <collapse-vertical>
          <div v-show="isDisplay">
        <div>
        <el-form-item prop="account_id" label="商户订单号">
          <el-input  v-model="elePayDetForm.account_id" placeholder="请输入商户订单号"></el-input>
        </el-form-item>
        <el-form-item prop="account_place" label="泊位编号">
          <el-input  v-model="elePayDetForm.account_place" placeholder="请输入泊位编号"></el-input>
        </el-form-item>
        <el-form-item prop="account_no" label="流水号">
            <el-input  v-model="elePayDetForm.account_no" placeholder="请输入流水号"></el-input>
        </el-form-item>
         </div>
        <div>
         <el-form-item prop="account_orgname" label="收费单位">
          <el-input v-model="elePayDetForm.account_orgname" @click.native="handleSelectOrgno" placeholder="请选择收费单位"  readonly>
          </el-input>
        </el-form-item>
        <el-form-item prop="account_parkname" label="停车场">
          <el-input v-model="elePayDetForm.account_parkname" @click.native="handleSelectOrgname"      placeholder="请选择停车场"  readonly>
          </el-input>
        </el-form-item>
         <el-form-item prop="account_chargeunitname"label="收费路段">
          <el-input v-model="elePayDetForm.account_chargeunitname" @click.native="handleSelectPark"   placeholder="请选择收费路段"  readonly>
          </el-input>
        </el-form-item>
         <el-form-item prop="account_username" label="收费员">
          <el-input v-model="elePayDetForm.account_username" @click.native="handleSelectParkname"  placeholder="请选择收费员"  readonly>
          </el-input>
        </el-form-item>
        </div>
        <div>
          <el-form-item prop="account_cartype" label="车辆类型">
            <el-radio-group v-model="elePayDetForm.account_cartype" size="small">
              <el-radio   v-for="item in cartype" :label="item.id" :key="item.id" >{{item.value}}</el-radio>
            </el-radio-group>
          </el-form-item>
      </div>
        <el-row>
          <el-form-item prop="account_epaytype" >
            <el-col style="width: 75px">
              <span style="font-size: 12px; font-weight: bold; color: #7A7A7A;">支付类型</span>
            </el-col>
            <el-checkbox-group  v-model="elePayDetForm.epaytype">
              <el-checkbox  v-for="item in epaytype" :label="item.id" :key="item.id">{{item.value}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
        <el-form-item prop="account_sdate" label="支付时间">
          <el-date-picker v-model="elePayDetForm.account_sdate"
                          type="daterange"
                          :picker-options="pickerOptions"
                          value-format= "yyyy-MM-dd"
                          clearable
                          range-separator="-"
                          start-placeholder="支付时间起始"
                          end-placeholder="支付时间终止">
          </el-date-picker>
        </el-form-item>
         <el-form-item prop="account_shandledate" label="出场时间">
          <el-date-picker v-model="elePayDetForm.account_shandledate"
                          type="daterange"
                          value-format= "yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          range-separator="-"
                          start-placeholder="出场操作时间起始"
                          end-placeholder="出场操作时间终止">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-mini-form"  @click="submitForm(elePayDetForm,1)"
                     size="mini" >提交
          </el-button>
          <el-button class="btn-mini-form"  @click="resetForm('elePayDetForm')"
                     size="mini" >重置
          </el-button>
        </el-form-item>
          </div>
        </collapse-vertical>
        <el-row style="text-align: center"><el-button style="border: none;background-color: transparent" size="small" @click="isShow" :icon="isDisplay?'el-icon-arrow-up':'el-icon-arrow-down'">
        </el-button></el-row>
        <!-- 选择单位弹出框 -->
        <person-child-dialog-dw :dialogDwVisible.sync="orgnoVisible"  @dwName="selectDwnameParkingMag" :dwType="0"></person-child-dialog-dw>
        <!-- 选择车场弹出框 -->
        <parking-dialog :parkingVisible.sync="orgnameVisible"@parkName="selectOrgnameMsg">
        </parking-dialog>
        <!-- 选择收费路段弹出框 -->
        <person-child-dialog-road :dialogRoadVisible.sync="parkVisible" @roadName="selectParkMsg"></person-child-dialog-road>
        <!--选择收费员弹出框-->
        <person-select-dialog :dialogSelectPerVisible.sync="parknameVisible"@selectPer="selectParknameMsg"></person-select-dialog>
      </el-form>

</template>
<script>
  /* eslint-disable */
  import { selDictonary, selDictonaryValue } from '../../../api/dictionary'
  import { searchElePayDetail } from '../../../api/elePayDetail'
  import PersonChildDialogDw from "../../organizationManagement/personChild/personChildDialogDw" //单位
  import ParkingDialog from '../../operatingManagement/parkingflowChild/parkingDialog'     // 车场
  import PersonChildDialogRoad from '../../organizationManagement/personChild/personChildDialogRoad'//收费路段
  import PersonSelectDialog from '../../organizationManagement/organizationChild/personSelectDialog'
  import ElFormItem from "element-ui/packages/form/src/form-item";
  import CollapseVertical from '../../../utils/collapseVertical'
  export default {
    name: 'ele-pay-det-form',
    components: {
      ElFormItem,
      PersonChildDialogDw, // 单位
      ParkingDialog,     // 车场
      PersonChildDialogRoad,  // 收费路段
      PersonSelectDialog  ,
      CollapseVertical// 收费员
    },
    data() {
      return {
        elePayDetForm: {
          account_id:'',   // 商户订单号
          account_no:'',   // 流水号
          account_orgno:'', //收费单位编号
          account_orgname:'', // 收费单位名称
          account_park:'', // 收费停车场
          account_parkname:'', // 收费停车场名称
          account_sdate: [new Date(), new Date()], // 支付时间
          account_shandledate: '', // 出场操作时间
          account_place: '', // 泊位编号
          account_carno: '', // 车牌号
          account_cartype: '', // 车辆类型
          epaytype: [], // 支付类型
          account_chargeunit: '',// 收费路段编号
          account_chargeunitname: '',// 收费路段名称
          account_user: '', // 收费员编号
          account_username: '', // 收费员名称
        },
        cartype:[],
        epaytype:[],
        orgnoVisible : false, // 收费单位是否显示
        orgnameVisible : false, // 停车场
        parkVisible : false,    // 收费路段
        parknameVisible : false, // 收费员
        isDisplay : false,

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
      }
    },
    mounted: function() {

      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'cartype') {
            this.cartype = content[i].comboboxDetailList;
          } else if (content[i].id === 'epaytype') {
            this.epaytype = content[i].comboboxDetailList;
          } else {
            continue
          }
        }
      })
    },
    props: ['pageNum', 'ranNum','pageSize'],
    watch: {
      pageNum: function(val) {
        this.submitForm()
      },
      ranNum: function(val) {
        this.submitForm()
      },
      pageSize: function(val) {
        this.submitForm()
      },
    },
    methods: {
      submitForm: function() {
        searchElePayDetail(this.elePayDetForm, this.pageNum,this.pageSize).then(res => {
          selDictonaryValue(res).then(resp => {
            this.$emit('tableData', resp)
            this.$emit('tableLoad', false)
          })
       })
      },
      resetForm(elePayDetForm) {  // 清空form
        this.$refs[elePayDetForm].resetFields()
      },
      handleSelectOrgno() {  // 收费单位
        this.orgnoVisible= true
      },
      selectDwnameParkingMag(val){
         this.elePayDetForm.account_orgno=val.orgno
        this.elePayDetForm.account_orgname=val.orgname
      },
      handleSelectOrgname() {  // 停车场
        this.orgnameVisible= true
      },
      selectOrgnameMsg(val) {
        this.elePayDetForm.account_park=val.parkno
        this.elePayDetForm.account_parkname=val.parkname
      },
      handleSelectPark() {    // 收费路段
         this.parkVisible= true
      },
      selectParkMsg(val) {
        this.elePayDetForm.account_chargeunit=val.unitno
        this.elePayDetForm.account_chargeunitname=val.unitname
      },
      handleSelectParkname() {  // 收费员
        this.parknameVisible= true
      },
      selectParknameMsg(val) {
        this.elePayDetForm.account_user=val.sfzhm
        this.elePayDetForm.account_username=val.name
      },
      isShow(){
        this.isDisplay =!this.isDisplay
      }

    }
}
</script>

<style scoped>
</style>
